<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/wenzhangleibie.css" />
		<link rel="stylesheet" href="css/zeroModal.css">
		<script src="js/jquery.min.js"></script>
		<script src="js/base.js"></script>
		<script src="js/zeroModal.min.js"></script>
		<style>
		html,body{
			height:100%
		}
		table tr td{
			border:1px solid #ccc;
		}
		table tbody td{
			height: 25px!important;
		}
		table thead{
            background:#0073A9;
            color:#fff;
        }
        table thead td{
            height: 30px;
        }
		.left div{
			height: 25px;
		}
		.left div:hover{
			background: #0073A9;
			color:#fff;
			cursor: pointer;
		}
		.lb_xg,.lb_sc{
			border:1px solid #0073A9;
			background:#0073A9;
			display: inline-block;
			padding:1px 5px;
			border-radius: 4px;
			color:#fff;
			font-size: 12px;
			cursor: pointer;
		}
		.jc_name,.ej_leibe,.dp_leibie{
			border:none;
			border-bottom: 1px solid #ccc;
			width:300px;
			outline: none;
		}
		.btn{
			display: inline-block!important;
			position: relative;
			top:80px;
		}
		.btn button{
			cursor: pointer;
		}
		.qxl{
			margin-left:20px;
		}
		.right{
			height:100%!important;
		}
		</style>
	</head>


	<body>
		<div class="box">
			<div class="left">
				<p style="text-align: center;font-size: 4;color: #666;font-weight: bold;margin-bottom: 10px;">操作</p>
				<div style="border-bottom: none;">新增基础类别</div>
				<div style="border-bottom: none;display: none;">修改基础类别</div>
				<div style="border-bottom: none;">新增二级类别</div>
				<div style="border-bottom: none;display: none;">修改二级类别</div>
				<div style="border-bottom: none;border-bottom:1px solid #666">新增短评类别</div>
				<div style="display: none;">修改短评类别</div>
			</div>
			<div class="right">
				<!--总体表格-->
				<div class="right_one">
							<div style="text-align: left;">
								<p style="color: #666;position: absolute;font-weight: bold;">基础类别列表:</p><br />
								<table cellspacing="0" cellpadding="0" style="margin-top: 20px;">
									<thead>
										<tr>
											<td>ID</td>
											<td>类别名称</td>
											<td >文章数</td>
											<td>修改</td>
											<td>删除</td>
										</tr>
									</thead>
									<tbody class="jq_lei">
									</tbody>
									
								</table>
						</div>
<!--						二级类别表格-->
						<div style="text-align: left;margin-top: 20px;">
								<p style="color: #666;display:block;position: absolute;font-weight: bold;">二级类别列表:</p><br />
								<table cellspacing="0" cellpadding="0" style="margin-top: 20px;">
									<thead>
										<tr>
											<td>ID</td>
											<td>类别名称</td>
											<td>文章数</td>
											<td>修改</td>
											<td>删除</td>
										</tr>
									</thead>
									<tbody class="jq_er_lei">
									</tbody>
								
								</table>
							</div>
							<div style="text-align: left;margin-top: 20px;">
								<p style="color: #666;position: absolute;font-weight: bold;">短评类别列表:</p><br />
								<table cellspacing="0" cellpadding="0" style="margin-top: 20px;">
									<thead>
										<tr>
											<td>ID</td>
											<td>类别名称</td>
											<td>文章数</td>
											<td>修改</td>
											<td>删除</td>
										</tr>
									</thead>
									<tbody class="jq_duan_lei">
									</tbody>
								
								</table>
						</div>
					</div>					
				<!--获取基础类别-->
				<div class="one">
					<div >
						<div>
							<span id="s1">类别名称：</span>
							<input type="text" class="jc_name">
							<input type="hidden">
						</div>
						<div class="btn">
							<button class="add_jc">创建</button><button class="qxl">取消</button>
						</div>
					</div>
				</div>
				<!--修改基础类别-->
				<div class="one qx_one">
					<div >
						<div>
							<span id="s1">类别名称：</span>
							<input type="text" class="jc_name jc_name1">
							<input type="hidden" class="qx_oid">
						</div> 
						<div class="btn">
							<button class="xg_lienoe">修改</button>
							<button class="qxl">取消</button>
						</div>
					</div>
				</div>
				<!--新增二级类别-->
				<div class="one">
					<div >
						<div>
							<span id="s1">二级类别名称：</span>
							<input type="text" class="ej_leibe">
						</div> 
						<div>
							 
						</div>
						<div style="margin-top:30px;"> 
							<span >勾选基础类别:</span>
							<table cellspacing="0" cellpadding="0" style="margin-top: 10px;">
								<thead>
									<tr>
										<td>选择</td>
										<td>ID</td>
										<td>类别名称</td>
										<td>文章数</td>
									</tr>
								</thead>
								<tbody class="jq_lei_choce">
								</tbody>

							</table>
						</div>
						<div class="btn">
							<button class="ej_add">创建</button><button class="qxl">取消</button>
						</div>
					</div>
				</div>
				
				<!--修改二级类别-->
				<div class="one change_ej">
					<div>
						<div>
							<span id="s1">二级类别名称：</span>
							<input type="text" class="ej_leibe ej_leibe1">
							<input type="hidden" class="ej_oid">
						</div>
						<div>
				
						</div>
						<div style="margin-top:30px;">
							<span>勾选基础类别:</span>
							<table cellspacing="0" cellpadding="0" style="margin-top: 10px;">
								<thead>
									<tr>
										<td>选择</td>
										<td>ID</td>
										<td>类别名称</td>
										<td>文章数</td>
									</tr>
								</thead>
								<tbody class="jq_lei_choce">
								</tbody>
				
							</table>
						</div>
						<div class="btn">
							<button class="xj_ej_s">修改</button>
							<button class="qxl">取消</button>
						</div>
					</div>
				</div>
				<!--新增短语类别-->
				<div class="one ">
					<div >
						<div>
							<span id="s1">类别名称：</span>
							<input type="text" class="dp_leibie">
							
						</div>
						<div class="btn">
							<button class="add_dp_lei">创建</button><button class="qxl">取消</button>
						</div>
					</div>
				</div>
				<!--修改短评类别-->
				<div class="one dp_lei">
					<div >
						<div>
							<span id="s1">类别名称：</span>
							<input type="text" class="dp_leibie dp_leibie1">
							<input type="hidden" class="dp_oid">
						</div>
						<div class="btn">
							<button class="add_dp_leiqx"> 修改</button>
							<button class="qxl">取消</button>
						</div>
					</div>
				</div>
				
			</div>
			</div>
			<script type="text/javascript">
				var Odiv = $('.left>div');
				var oDIV = $('.right>.one');
				var right_one=$('.right_one');
				Odiv.click(function() {
					var index = $(this).index() - 1;
					Odiv.removeClass('active');
					$(this).addClass('active');
					oDIV.hide();
					right_one.addClass('active_two');
					oDIV.eq(index).show();
				})
			</script>
			<script src="js/jichuleibie.js"></script>
	</body>

</html>